<template>
    <div>
        <!--        按钮-->
        <el-row>
            <el-col :span="4" style="font-size: larger">订单中心
            </el-col>
        </el-row>
        <el-row>
            <el-row>
                <el-col :span="4">
                    <el-select placeholder="" v-model="param.kind">
                        <el-option label="菜品" :value="1"></el-option>
                        <el-option label="订单" :value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-input
                        placeholder="请输入内容"
                        v-model="param.key"
                        clearable>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-col>
            </el-row>
        </el-row>
        <div v-for="(v, index) in order_list" :key="v.id"  :offset="1"  style="text-align: left; font-size: larger; color: deepskyblue">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-row  style="font-size: larger; background-color:#faeebf">
                        <el-col  :span="4"   >
                            用户昵称:{{v.nickname}}
                        </el-col>
                        <el-col  :span="4"   >
                            订单号:{{v.orderid}}
                        </el-col>
                        <el-col  :span="10"   >
                            联系方式:{{v.telephone}}
                        </el-col>
                      <el-col  :span="6"   >
                            配送地址:{{v.address}}
                      </el-col>
                    </el-row>
                    <el-row>
                        <el-col  :span="24"   style="text-align: left; background-color: #eaeaea">
                            总金额:￥{{v.totalAmout}},商品总类：{{v.totalNum}}
                        </el-col>
                    </el-row>
                    <el-row >
                        <div v-show="(v.state != 3)">
                            <el-col :span="8">
                                <el-steps :active="v.state" finish-status="success">
                                    <el-step title="接单"></el-step>
                                    <el-step title="完成"></el-step>
                                </el-steps>
                            </el-col  >
                            <el-col :span="4" v-show="(v.state != 2)"><el-button style="" @click="next(index)">{{tips_word(index)}}</el-button></el-col>
                        </div>
                        <el-col :span="4" v-show="(v.state == 1)"><el-button style="" @click="cancel(index)">取消订单</el-button></el-col>
                        <el-col :span="4" v-show="(v.state == 3)"><el-tag type="danger" style="font-size: larger">订单已取消</el-tag></el-col>
                        <el-col :span="4" v-show="(v.state == 2)"><el-tag type="success" style="font-size: larger">订单已完成</el-tag></el-col>
                    </el-row>
                </div>
                <div v-for="goods in v.goods" :key="goods.goods_id" class="text item">
                    <el-descriptions class="margin-top"  :column="3" size="medium" border>
                        <el-descriptions-item>
                            <template slot="label">
                                店铺名
                            </template>
                            {{goods.shop_name}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                商品名
                            </template>
                            {{goods.goods_name}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                总数量
                            </template>
                            {{goods.count}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                总价格
                            </template>
                            {{goods.price}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                图片
                            </template>
                            <el-image :src="goods.goods_img" style="width: 120px; height: 90px"  fit="cover"></el-image>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "Order",
    data() {
        return {
            param:{
                kind:1,  ///搜索订单或者菜品
                key:'',
                busid:window.sessionStorage.getItem('userid'),
            },
            order_list:[],
            price:0,
            change_state:{
                orderid:0,
                busid:0,
                state:0,
            },
           ///////////
            path: "",
            socket: "",
        }
    },
    methods: {
        search(){
            this.getorder_list();
        },
        change_order_state(orderid, busid, state){
            this.change_state.orderid = orderid;
            this.change_state.busid = busid;
            this.change_state.state = state;
            this.$ajax.get(this.$API.http+"/api/User/changestate", {params:this.change_state}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.$msg.success(this.msg);
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        getorder_list(){  ////查询功能，当前有哪些
            this.$ajax.get(this.$API.http+"/api/Userindex/busindex", {params:this.param}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.order_list = res.data.order_list;
                        console.log(this.order_list);
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        next(index) {
            if (this.order_list[index].state ==  2)
                this.$msg.error('订单已完成无法修改状态');
            else{
                this.order_list[index].state++;
                let arr = this.order_list[index];
                this.change_order_state(arr.orderid, arr.busid, arr.state);
                // this.web_socket();
            }

        },
        tips_word(index){
            if(this.order_list[index].state == 2){
                return '订单已结束'
            }
            else if(this.order_list[index].state == 1){
                return '确认完成'
            }
            else if(this.order_list[index].state == 0){
                return   '接单'
            }
        },
        cancel(index) {
            this.order_list[index].state = 3;
            let arr = this.order_list[index];
            this.change_order_state(arr.orderid, arr.busid, arr.state);
        },
        ///////////////////////////////////////////
        // socket连接成功
        init() {
            if (typeof WebSocket === "undefined") {
                alert("您的浏览器不支持socket");
            } else {
                // 实例化socket
                this.socket = new WebSocket(this.path);
                // 监听socket连接
                this.socket.onopen = this.open;
                // 监听socket错误信息
                this.socket.onerror = this.error;
                // 监听socket消息
                this.socket.onmessage = this.getMessage;
            }
        },

        open() {
            console.log("socket连接成功");
        },
// socket连接失败
        error() {
            console.log("连接错误");
        },
// 接收消息
        getMessage(msg) {
            console.log("==websocket接收数据==");
            console.log(msg.data);
        },
// 发送数据
        send() {
            this.socket.send("这是传送数据");
        },
// 关闭socket
        close() {
            console.log("socket已经关闭");
        }



    }
    ,
    created() {
        this.getorder_list();
        // this.create_websocket()
    },
    mounted() {
        // 初始化
        this.init();
    },
    destroyed() {
        // 销毁监听
        this.socket.onclose = this.close;
    }
}
</script>

<style scoped>

.mid{
    margin-top: 25%;
    height: 50%;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}


</style>



